<template>
  <div class="feedback-container">
    <!-- 顶部进度指示器 -->
    <div class="progress-bar">
      <div class="progress" :style="{ width: progressPercentage + '%' }"></div>
    </div>

    <!-- 主要内容区域 -->
    <div class="content-wrapper">
      <!-- 欢迎页头部 -->
      <header class="feedback-header">
        <h1 class="title">
          <span class="icon"><i class="fas fa-comments"></i></span>
          问题反馈中心
        </h1>
        <p class="subtitle">您的反馈是我们进步的动力</p>
      </header>

      <!-- 反馈表单 -->
      <form @submit.prevent="submitFeedback" class="feedback-form">
        <!-- 步骤导航 -->
        <div class="steps-nav">
          <div v-for="(step, index) in steps" 
               :key="index"
               :class="['step', { 
                 'active': currentStep === index,
                 'completed': currentStep > index 
               }]">
            <div class="step-number">{{ index + 1 }}</div>
            <div class="step-label">{{ step }}</div>
          </div>
        </div>

        <!-- 表单步骤内容 -->
        <div class="form-steps">
          <!-- 步骤1: 问题类型 -->
          <div v-show="currentStep === 0" class="form-step">
            <h3>选择问题类型</h3>
            <div class="type-cards">
              <div v-for="type in problemTypes" 
                   :key="type.id"
                   :class="['type-card', { active: feedback.problemType === type.id }]"
                   @click="selectProblemType(type.id)">
                <i :class="getTypeIcon(type.kind)"></i>
                <span>{{ type.kind }}</span>
                <div class="check-mark" v-show="feedback.problemType === type.id">
                  <i class="fas fa-check"></i>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤2: 问题描述 -->
          <div v-show="currentStep === 1" class="form-step">
            <h3>问题描述</h3>
            <div class="input-group">
              <label>问题简介</label>
              <div class="input-wrapper">
                <input 
                  type="text" 
                  v-model="feedback.summary"
                  :class="{ 'has-error': validationErrors.summary }"
                  @focus="showInputTip('summary')"
                  placeholder="简单描述您遇到的问题"
                />
                <div class="input-tip" v-if="currentTip === 'summary'">
                  <i class="fas fa-info-circle"></i>
                  请输入5-20个字的简要描述
                </div>
                <div class="char-count" :class="{ 'warning': feedback.summary.length > 20 }">
                  {{ feedback.summary.length }}/20
                </div>
              </div>
            </div>

            <div class="input-group">
              <label>详细描述</label>
              <div class="input-wrapper">
                <textarea 
                  v-model="feedback.description"
                  rows="4"
                  placeholder="详细描述问题发生的场景和步骤"
                  @focus="showInputTip('description')"
                ></textarea>
                <div class="input-tip" v-if="currentTip === 'description'">
                  <i class="fas fa-info-circle"></i>
                  详细的描述有助于我们更好地解决问题
                </div>
              </div>
            </div>

            <div class="severity-selector">
              <label>问题严重程度</label>
              <div class="severity-options">
                <div v-for="level in severityLevels" 
                     :key="level.value"
                     :class="['severity-option', { active: feedback.severity === level.value }]"
                     @click="feedback.severity = level.value">
                  <i :class="level.icon"></i>
                  <span>{{ level.label }}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- 步骤3: 联系方式 -->
          <div v-show="currentStep === 2" class="form-step">
            <h3>联系方式</h3>
            <div class="input-group">
              <label>电子邮箱</label>
              <div class="input-wrapper">
                <input 
                  type="email" 
                  v-model="feedback.contact"
                  :class="{ 'has-error': validationErrors.contact }"
                  @focus="showInputTip('contact')"
                  placeholder="请输入您的联系邮箱"
                />
                <div class="input-tip" v-if="currentTip === 'contact'">
                  <i class="fas fa-info-circle"></i>
                  我们会通过邮件告知问题处理进展
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 表单控制按钮 -->
        <div class="form-controls">
          <button 
            type="button" 
            class="btn-secondary"
            v-if="currentStep > 0"
            @click="prevStep">
            <i class="fas fa-arrow-left"></i>
            上一步
          </button>
          
          <button 
            type="button" 
            class="btn-primary"
            v-if="currentStep < steps.length - 1"
            @click="nextStep">
            下一步
            <i class="fas fa-arrow-right"></i>
          </button>
          
          <button 
            type="submit" 
            class="btn-submit"
            v-if="currentStep === steps.length - 1"
            :disabled="isSubmitting">
            <i :class="isSubmitting ? 'fas fa-spinner fa-spin' : 'fas fa-paper-plane'"></i>
            {{ isSubmitting ? '提交中...' : '提交反馈' }}
          </button>
        </div>
      </form>

      <!-- 系统Bug反馈入口 -->
      <div class="system-bug-link">
        <router-link to="/feedback-workspace" class="link-card">
          <i class="fas fa-bug"></i>
          <span>发现系统Bug？点击这里反馈</span>
          <i class="fas fa-chevron-right"></i>
        </router-link>
      </div>
    </div>

    <!-- 成功提交弹窗 -->
    <div class="modal" v-if="showSuccessModal">
      <div class="modal-content success-modal">
        <div class="success-icon">
          <i class="fas fa-check-circle"></i>
        </div>
        <h3>反馈提交成功</h3>
        <p>感谢您的反馈，我们会尽快处理！</p>
        <button @click="closeSuccessModal" class="btn-primary">
          完成
        </button>
      </div>
    </div>

    <!-- 全局提示 -->
    <div class="toast" :class="{ 'show': showToast }">
      {{ toastMessage }}
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'FeedbackPage',
  data() {
    return {
      currentStep: 0,
      steps: ['选择类型', '问题描述', '联系方式'],
      feedback: {
        problemType: '',
        summary: '',
        description: '',
        severity: '中',
        contact: ''
      },
      problemTypes: [],
      currentTip: '',
      validationErrors: {},
      isSubmitting: false,
      showSuccessModal: false,
      showToast: false,
      toastMessage: '',
      severityLevels: [
        { value: '高', label: '严重', icon: 'fas fa-exclamation-circle text-danger' },
        { value: '中', label: '普通', icon: 'fas fa-exclamation-triangle text-warning' },
        { value: '低', label: '轻微', icon: 'fas fa-info-circle text-info' }
      ]
    };
  },
  computed: {
    progressPercentage() {
      return ((this.currentStep + 1) / this.steps.length) * 100;
    }
  },
  created() {
    this.fetchProblemTypes();
  },
  methods: {
    async fetchProblemTypes() {
      try {
        const response = await axios.get('/api/problemList');
        if (response.data.code === 200) {
          this.problemTypes = response.data.data;
        }
      } catch (error) {
        this.showToastMessage('获取问题类型失败');
      }
    },

    getTypeIcon(kind) {
      // 根据问题类型返回对应的图标
      const icons = {
        '功能问题': 'fas fa-cogs',
        '性能问题': 'fas fa-tachometer-alt',
        '界面问题': 'fas fa-desktop',
        '其他': 'fas fa-question-circle'
      };
      return icons[kind] || 'fas fa-question-circle';
    },

    selectProblemType(typeId) {
      this.feedback.problemType = typeId;
      this.nextStep();
    },

    showInputTip(field) {
      this.currentTip = field;
    },

    validateStep() {
      this.validationErrors = {};
      
      if (this.currentStep === 0 && !this.feedback.problemType) {
        this.showToastMessage('请选择问题类型');
        return false;
      }
      
      if (this.currentStep === 1) {
        if (!this.feedback.summary || this.feedback.summary.length < 5) {
          this.validationErrors.summary = true;
          this.showToastMessage('问题简介至少需要5个字');
          return false;
        }
        if (this.feedback.summary.length > 20) {
          this.validationErrors.summary = true;
          this.showToastMessage('问题简介不能超过20个字');
          return false;
        }
      }
      
      if (this.currentStep === 2) {
        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        if (!emailRegex.test(this.feedback.contact)) {
          this.validationErrors.contact = true;
          this.showToastMessage('请输入有效的邮箱地址');
          return false;
        }
      }
      
      return true;
    },

    nextStep() {
      if (this.validateStep()) {
        this.currentStep++;
      }
    },

    prevStep() {
      this.currentStep--;
    },

    async submitFeedback() {
      if (!this.validateStep()) return;
      
      this.isSubmitting = true;
      const formData = new FormData();
      
      for (const key in this.feedback) {
        formData.append(key, this.feedback[key]);
      }

      try {
        const response = await axios.post('/api/submitFeedback', formData, {
          headers: {
            'Content-Type': 'multipart/form-data',
          },
        });
        
        if (response.status === 200) {
          this.showSuccessModal = true;
        }
      } catch (error) {
        this.showToastMessage('提交失败，请稍后重试');
      } finally {
        this.isSubmitting = false;
      }
    },

    showToastMessage(message) {
      this.toastMessage = message;
      this.showToast = true;
      setTimeout(() => {
        this.showToast = false;
      }, 3000);
    },

    closeSuccessModal() {
      this.showSuccessModal = false;
      this.resetForm();
    },

    resetForm() {
      this.currentStep = 0;
      this.feedback = {
        problemType: '',
        summary: '',
        description: '',
        severity: '中',
        contact: ''
      };
      this.validationErrors = {};
    }
  }
};
</script>

<style scoped>
/* 基础样式 */
.feedback-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  padding: 2rem;
}

/* 进度条 */
.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 1000;
}

.progress {
  height: 100%;
  background: linear-gradient(90deg, #4481eb, #04befe);
  transition: width 0.3s ease;
}

/* 内容包装器 */
.content-wrapper {
  max-width: 800px;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

/* 头部样式 */
.feedback-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 3rem 2rem;
  text-align: center;
}

.title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

.icon {
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem;
  border-radius: 50%;
}

.subtitle {
  opacity: 0.8;
  font-size: 1.1rem;
}

/* 步骤导航 */
.steps-nav {
  display: flex;
  justify-content: space-between;
  padding: 2rem;
  position: relative;
}

.steps-nav::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  background: #e0e0e0;
  z-index: 1;
}

.step {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.step-number {
  width: 40px;
  height: 40px;
  background: white;
  border: 2px solid #e0e0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  transition: all 0.3s ease;
}

.step.active .step-number {
  background: #667eea;
  border-color: #667eea;
  color: white;
}

.step.completed .step-number {
  background: #4caf50;
  border-color: #4caf50;
  color: white;
}

/* 表单步骤 */
.form-step {
  padding: 2rem;
}

/* 问题类型卡片 */
.type-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.type-card {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.type-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.type-card.active {
  background: #667eea;
  color: white;
}

.check-mark {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.2);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 输入组件 */
.input-group {
  margin-bottom: 1.5rem;
}

.input-wrapper {
  position: relative;
}

input, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  transition: all 0.3s ease;
}

input:focus, textarea:focus {
  border-color: #667eea;
  outline: none;
}

.input-tip {
  position: absolute;
  top: 100%;
  left: 0;
  background: #f8f9fa;
  padding: 0.5rem;
  border-radius: 4px;
  font-size: 0.9rem;
  color: #666;
  margin-top: 0.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

.char-count {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  color: #666;
}

.char-count.warning {
  color: #f44336;
}

/* 严重程度选择器 */
.severity-selector {
  margin-top: 2rem;
}

.severity-options {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
}

.severity-option {
  flex: 1;
  padding: 1rem;
  border: 2px solid #e0e0e0;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.severity-option.active {
  border-color: #667eea;
  background: #667eea;
  color: white;
}

/* 按钮样式 */
.form-controls {
  padding: 2rem;
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #e0e0e0;
}

.btn-primary, .btn-secondary, .btn-submit {
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
}

.btn-primary {
  background: #667eea;
  color: white;
}

.btn-secondary {
  background: #f8f9fa;
  color: #333;
}

.btn-submit {
  background: #4caf50;
  color: white;
}

.btn-submit:disabled {
  background: #ccc;
  cursor: not-allowed;
}

/* 系统Bug链接 */
.system-bug-link {
  padding: 2rem;
  text-align: center;
}

.link-card {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 2rem;
  background: #f8f9fa;
  border-radius: 8px;
  color: #333;
  text-decoration: none;
  transition: all 0.3s ease;
}

.link-card:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

/* 成功弹窗 */
.modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  animation: slideUp 0.3s ease;
}

.success-icon {
  font-size: 4rem;
  color: #4caf50;
  margin-bottom: 1rem;
}

/* Toast提示 */
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1rem 2rem;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

/* 动画 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .feedback-container {
    padding: 1rem;
  }
  
  .type-cards {
    grid-template-columns: 1fr;
  }
  
  .severity-options {
    flex-direction: column;
  }
  
  .form-controls {
    flex-direction: column;
    gap: 1rem;
  }
  
  .btn-primary, .btn-secondary, .btn-submit {
    width: 100%;
    justify-content: center;
  }
}
</style>
  